<script setup lang="ts">
import { HxqDetailLieLeft, HxqDetailLieLine } from "vue-mobile-hxq";
</script>
<template>
  <div class="public-flex-box">
    <div class="public-phone-title">卡片形式</div>
    <div class="public-usage-box">
      <hxq-detail-lie-left name="名称" :value="'张三'" />
      <hxq-detail-lie-left name="名称" :value="'张三'" :settype="'right'" />
      <hxq-detail-lie-left
        name="地址"
        :value="'超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级多文字'"
        :settype="'feed'"
      />
    </div>
  </div>
  <div class="padding-flex-box">
    <div class="public-phone-title">底部带横线</div>
    <div class="public-usage-box">
      <hxq-detail-lie-line name="啊啊啊啊" :value="'张三'" />
      <hxq-detail-lie-line
        name="店铺信息"
        :value="'超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级超级多文字'"
        :settype="'feed'"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.padding-flex-box {
  background: #fff;
  border-radius: 20px;
  margin-bottom: 20px;
  .public-phone-title {
    padding-left: 20px;
  }
}
</style>
